import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { QuestionCircleFilled } from "@ant-design/icons";
import { Space, Col, Tooltip, Row } from "antd";
import GoBack from "@/components/TheGoBack";
import { getShopOrderDetail, } from '@/api/fundsManage/billList.js';
import OrderStep from './components/orderStep';
import MemberInfo from './components/memberInfo';
import OrderTable from './components/orderTable';
import { Decimal } from 'decimal.js';

export default function GoodsDetails() {
  const location = useLocation(); //上个页面参数
  const orderId = location.state.id //订单主键id
  const [orderInfo, setOrderInfo] = useState([]) //表格数据
  useEffect(() => {
    getData()
  }, [])

  // 获取接口数据
  const getData = async () => {
    await getShopOrderDetail({ orderId }).then(res => {
      if (res.code === 0 && res.data) {
        setOrderInfo(res.data)
      }
    })

  }

  return (
    <div className='wrap-box'>
      <GoBack title={"订单详情"} />
      <div className='wrap-box-content'>
        <OrderStep orderInfo={orderInfo}></OrderStep>
        <MemberInfo orderInfo={orderInfo}></MemberInfo>
        <OrderTable tableData={orderInfo.orderDetailList}></OrderTable>
        <Row style={{ float: 'right', marginRight: 50 }}>
          <Col >
            <Row style={{ margin: '10px 0' }}>
              <Col>商品总价：</Col>
              <Col >{orderInfo.orderTotalPrice ? '￥' + Decimal(orderInfo.orderTotalPrice).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'} </Col>
            </Row>
            <Row style={{ margin: '10px 0' }}>
              <Col >运费：</Col>
              <Col >{orderInfo.freight ? '￥' + Decimal(orderInfo.freight).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'} </Col>
            </Row>
            <Row style={{ margin: '10px 0', }}>
              <Col style={{ margin: 'auto 0' }}>优惠：</Col>
              <Col >
                <Space>
                  <Tooltip title={
                    <Space direction={"vertical"}>
                      <div>优惠券抵扣：{orderInfo.couponTotal ? '￥' + Decimal(orderInfo.couponTotal).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'}</div>
                      <div>满减抵扣：{orderInfo.fullDecrementAmount ? '￥' + Decimal(orderInfo.fullDecrementAmount).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'}</div>
                    </Space>
                  }>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <span>{orderInfo.platformDiscountPrice ? '￥' + Decimal(orderInfo.platformDiscountPrice).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'}</span>
                      <QuestionCircleFilled style={{ fontSize: 20, marginLeft: 5 }} />
                    </div>
                  </Tooltip>
                </Space>

              </Col>
            </Row>
            {
              orderInfo.isProprietary !== 'N' && <Row style={{ margin: '10px 0' }}>
                <Col >哈哈豆抵扣：</Col>
                <Col >{orderInfo.integralDiscountPrice ? '￥' + Decimal(orderInfo.integralDiscountPrice).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'}</Col>
              </Row>
            }

            <Row style={{ color: "red", margin: '10px 0' }}>
              <Col >实付金额：</Col>
              <Col > {orderInfo.orderPayPrice ? '￥' + Decimal(orderInfo.orderPayPrice).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'}</Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div >
  )
}